<template>
  <view class="metting-room">
    <PageWarpper page-name="共享会议室">
      <template v-slot:main>
        <view class="group-hd d-flex border-top">
          <label for="" class="siyuan-medium">日期</label>
          <label for="" class="siyuan-medium f20">
            {{ getWeek(optionsData.meetingDate) }}
            <text class="intel-one-mono-medium">{{ getTime(optionsData.meetingDate) }}</text>
          </label>
        </view>
        <!-- Date -->
        <view v-if="type == 1" class="date_groups hide-scroll border-top border-bottom">
          <view
            class="date_groups_cell d-flex"
            v-for="(subItem, subIndex) in timeList"
            :key="subIndex"
            :class="{
              actived: optionsData.meetingDate == subItem.meetingDate,
              'border-left': optionsData.meetingDate == subItem.meetingDate && subIndex != 0,
              'border-right': optionsData.meetingDate == subItem.meetingDate && subIndex != 4,
            }"
            @click="toggleClick(subItem.meetingDate, subIndex)"
          >
            {{ getWeek(subItem.meetingDate) }}
            <br />
            <text class="intel-one-mono-regular">{{ getTime(subItem.meetingDate) }}</text>
          </view>
        </view>
        <view class="group-hd d-flex border-bottom" :class="{ 'border-top': type == 2 }">
          <label for="" class="siyuan-medium">时间</label>
          <label for="" class="intel-one-mono-medium f20">{{ optionsData.time }}</label>
        </view>
        <template v-if="type == 1 && timeList && timeList[optionsData.subIndex]">
          <TimePeriod
            :time-list="timeList[optionsData.subIndex].meetingTimeVOS"
            :id="optionsData.meetingTimeId"
            :day="optionsData.meetingDate"
            :subIndex="optionsData.subIndex"
            @changeTime="toggleClick"
          />
          <view class="group-hd d-flex border-bottom">
            <label for="" class="siyuan-medium">合计</label>
            <label for="" class="intel-one-mono-medium f20">
              <text class="siyuan-medium">￥</text>
              1
            </label>
          </view>
          <button class="black-btn" @click="mettingSubmit">确认支付</button>
        </template>
        <view class="subscribe-code" v-else="type == 2">
          <view class="hd siyuan-medium">预约码</view>
          <image :src="orderInfo.verifyCodeUrl" mode="widthFix"></image>
        </view>
      </template>
    </PageWarpper>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import PageWarpper from "@/components/Layer/PageWarpper.vue";
import Date from "@/components/Calendar/Date.vue";
import TimePeriod from "@/components/Calendar/TimePeriod.vue";
import { getMeetingList, setOrderSave, getOrderPay, getOrderDetail } from "@/server/api.js";
import { getWeek, openPage } from "@/util/index.js";
import { payClick } from "@/util/pay.js";

let type = ref(0); // type=1下单  type=2 结果页，查看券码
let optionsData = ref({});
let timeList = ref({});
let productInfo = ref({}); // 商品下单的信息
let orderInfo = ref({}); // 获取订单的信息

onLoad(options => {
  type.value = parseInt(options.page_type);
  if (options.page_type == 1 && !options.orderNo) {
    getMeetingData(options.meetingRoomId);
  } else {
    productInfo.value = {
      orderNo: options.orderNo,
    };
    getOrderInfo(options.orderNo);
  }
});

function getMeetingData(meetingId,date,time) {
  getMeetingList().then(res => {
    let list = res.data.meetingRoomVOS || [];
    let meetingObject = {
      meetingName: "",
      meetingDate: '',
      meetingRoomId: meetingId,
      meetingTimeId: "",
      time: '',
      subIndex: 0,
    };
    list.map((item, index) => {
      if (item.id == meetingId) {
        timeList.value = item.meetingDateVOS;
        meetingObject.meetingName = item.meetingName;
		meetingObject.meetingDate = date ||  item.meetingDateVOS[0].meetingDate;
		if(time) {
			item.meetingDateVOS.map(dateItem=>{
				if(dateItem.meetingDate == date) {
					dateItem.meetingTimeVOS.map(timeItem=>{
						if(timeItem.timeText == time) {
							meetingObject.meetingTimeId = timeItem.id,
							meetingObject.time = timeItem.timeText
						}
					})
				}
			})
		} else {
			item.meetingDateVOS[0].meetingTimeVOS
			for (var i = 0; i < item.meetingDateVOS[0].meetingTimeVOS.length; i++) {
				if(item.meetingDateVOS[0].meetingTimeVOS[i].isUse) {
					meetingObject.time = item.meetingDateVOS[0].meetingTimeVOS[i].timeText;
					meetingObject.meetingTimeId = item.meetingDateVOS[0].meetingTimeVOS[i].id;
					break;
				}
			}
		}
      }
    });
    console.log("Object", meetingObject);
    optionsData.value = meetingObject;
  });
}
function getTime(time) {
  return time ? time.split("-")[1] + "/" + time.split("-")[2] : "";
}

function toggleClick(date, index, id, timeText) {
  if (productInfo.value.orderNo) return;
  let params = {
    meetingDate: date,
    subIndex: index,
  };
  if (id) params = { ...params, meetingTimeId: id };
  if (timeText) params = { ...params, time: timeText };
  optionsData.value = {
    ...optionsData.value,
    ...params,
  };
}

function getOrderInfo(order) {
  if (!order) return;
  getOrderDetail({
    orderNo: order,
  }).then(res => {
    orderInfo.value = res.data;
    if (res.data.startTime && res.data.endTime) {
      let start = res.data.startTime.split(" ");
      let end = res.data.endTime.split(" ");
	  getMeetingData(
	    res.data.meetingRoomId,start[0],start[1].slice(0, 5) + "-" + (end[1].slice(0, 5) == '00:00'?'24:00':end[1].slice(0, 5))
	  );
    }
  });
}

// 微信支付
const wechatPay = (params, orderNo) => {
  payClick(params)
    .then(res => {
      // 根据订单id获取订单详情
      type.value = 2;
      getOrderInfo(orderNo);
    })
    .catch(res => {
      // 支付失败
      uni.showToast({
        title: "支付失败",
        icon: "none",
      });
    });
};

// 支付
const createPay = () => {
  let { orderNo = "" } = productInfo.value;
  getOrderPay({
    orderNo: orderNo,
    payMethod: 1,
  }).then(res => {
    if (res.code == 2000) {
      wechatPay(res.data, orderNo);
    } else {
      wx.hideLoading({});
      uni.showToast({
        title: res.msg,
        icon: "none",
      });
    }
  });
};

function mettingSubmit() {
  uni.showLoading({
    title: "加载中",
  });
  if (productInfo.value.orderNo) {
    createPay();
    return;
  }
  let times = optionsData.value.time.split("-");
  setOrderSave({
    endTime: optionsData.value.meetingDate + " " + times[1] + ":00",
    meetingDate: optionsData.value.meetingDate,
    meetingRoomId: optionsData.value.meetingRoomId,
    meetingTimeId: optionsData.value.meetingTimeId,
    number: 1,
    orderPrice: 1,
    pointDeduction: 0,
    productName: optionsData.value.meetingName,
    productPictureUrl: "",
    productType: 3,
    startTime: optionsData.value.meetingDate + " " + times[0] + ":00",
  }).then(res => {
    if (res.code == 2000) {
      productInfo.value = res.data;
      createPay();
      // emits("update:count", props.statusItem.next_status);
    } else {
      wx.hideLoading({});
      uni.showToast({
        title: res.msg,
        icon: "none",
      });
    }
  });
}
</script>

<style lang="scss" scoped>
.group-hd {
  height: 102rpx;
  padding: 0 28rpx;
  align-items: center;
  justify-content: space-between;
  background-color: #f2f2f2;
  font-size: 26rpx;
  text {
    margin-left: 18rpx;
  }
  .f20 {
	  font-size: 40rpx;
  }
}
.pay {
  padding: 136rpx 36rpx 0 50rpx;
  align-items: center;
  justify-content: space-between;
  label > text {
    font-size: 40rpx;
  }
}
button {
  width: 300rpx;
  margin: 100rpx auto 0;
  height: 102rpx;
  line-height: 102rpx;
}
.subscribe-code {
  .hd {
    margin: 68rpx 32rpx 42rpx;
    font-size: 26rpx;
  }
  image {
    width: 304rpx;
	height: 304rpx;
    margin-left: calc(50% - 152rpx);
  }
}

.date_groups {
  // white-space: nowrap;
  // overflow-y: hidden;
  // overflow-x: scroll;
  // -webkit-overflow-scrolling: touch;
  background-color: #ffffff;
  display: grid;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: 100rpx;
  align-content: space-between;
  justify-content: space-between;
  text-align: center;
  &_cell {
    // width: 144rpx;
    // height: 92rpx;
    // padding: 22rpx;
    padding-top: 14rpx;
    display: inline-block;
    font-size: 24rpx;
    text-align: center;
  }
  &_cell,
  &_cell > text {
    color: var(--grey-text);
  }
  &_cell.actived,
  &_cell.actived > text {
    color: var(--default-text);
  }
}
</style>
